<template>
  <div id="modify-interface">
    <div class="bg-color-w">
      <p class="form-title">接口基本信息</p>
      <el-form :model="DataCache" :label-position="'right'" label-width="160px" ref="interfacePostForm" :rules="interfacePostRules">
        <el-row>
          <el-col :push="2" :span="10">
            <el-form-item label="接口编号:" prop="interfaceCode">
              <el-input v-model="DataCache.interfaceCode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :push="2" :span="10">
            <el-form-item label="接口名称:" prop="interfaceName">
              <el-input v-model="DataCache.interfaceName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :push="2" :span="10">
            <el-form-item label="编码格式:">
              <el-input v-model="DataCache.fieldEncoding"></el-input>
            </el-form-item>
          </el-col>
          <el-col :push="2" :span="10">
            <el-form-item label="所属模块:" prop="moduleName">
              <!-- <el-select v-model="DataCache.moduleId" placeholder="请选择所属模块" popper-class="zIndex-popper">
                <el-option
                  v-for="item in moduleIdOpts"
                  :key="item.moduleId"
                  :label="item.moduleName"
                  :value="item.moduleId">
                </el-option>
              </el-select> -->
              <a href="javascript:void(0);" class="select" @click="openModuleList('add')">
                <span>{{ DataCache.moduleName && DataCache.moduleName !== '' ? DataCache.moduleName:'请选择所属模块' }}</span>
              </a>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :push="2" :span="10">
            <el-form-item label="授权访问模式:" prop="auditModel">
              <el-select v-model="DataCache.auditModel" placeholder="请选择授权访问模式" popper-class="zIndex-popper">
                <el-option
                  v-for="item in opts.auditModel"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :push="2" :span="10">
            <el-form-item label="接口描述信息:" prop="interfaceDesc">
              <el-input v-model="DataCache.interfaceDesc"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :push="2" :span="10">
            <el-form-item label="交易类型:" prop="transType">
              <el-select v-model="DataCache.transType" placeholder="请选择交易类型" popper-class="zIndex-popper">
                <el-option
                  v-for="item in opts.transType"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :push="2" :span="10">
            <el-form-item label="openid转换标识:" prop="opendIdTranslateFlag">
              <el-select v-model="DataCache.opendIdTranslateFlag" placeholder="请选择openid转换标识" popper-class="zIndex-popper">
                <el-option
                  v-for="item in opts.opendIdTranslateFlag"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :push="2" :span="10">
            <el-form-item label="流水转换标识" prop="orgJnlIdTranslateFlag">
              <el-select v-model="DataCache.orgJnlIdTranslateFlag" placeholder="请选择流水转换标识" popper-class="zIndex-popper">
                <el-option
                  v-for="item in opts.orgJnlIdTranslateFlag"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :push="2" :span="10">
            <el-form-item label="是否鉴权" prop="isAuthorized">
              <el-switch v-model="DataCache.isAuthorized" @change="isAuthorizedClick"></el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :push="2" :span="10">
            <el-form-item label="配置鉴权" prop="isAuthorized">
              <p style="cursor:pointer" @click="AuthorizedChange()">配置鉴权</p>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item class="dialogbtn">
          <el-button class="pd-w30" type="primary" size="mini" @click="resetFormData">重置</el-button>
          <el-button class="pd-w30" type="primary" size="mini" @click="addInterfaceSubmit()">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 选择模块列表弹窗 -->
    <v-select
      title="模块列表"
      :isShow="moduleListDialogVisible"
      :dataObj="moduleData"
      :tableLabels="tableLabels"
      @close="closeDialog"
      @page-changes="handlePageChanges"
      @select-data="selectModule"></v-select>
    <!--鉴权弹窗-->
    <el-dialog title="配置授权" :visible.sync="dialogGwGrantFlag" width="500px" @close="closeDialogWg()">
      <el-form :model="ruleFormGwGrant" :rules="rules" ref="ruleFormGwGrant" label-width="100px" class="demo-ruleForm">
        <el-form-item label="网管" prop="wGVal">
          <el-select v-model="ruleFormGwGrant.wGVal" placeholder="请选择网管" popper-class="zIndex-popper" @change="wGValeClick">
            <el-option
              v-for="item in optionsWg"
              :key="item.gwEnvId"
              :label="item.gwEnvName"
              :value="item.gwEnvId" >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="网管信息" prop="wGInfo">
          <el-select v-model="ruleFormGwGrant.wGInfo" placeholder="请选择网管信息" popper-class="zIndex-popper"  @change="wGInfoClick">
            <el-option value="" v-if="optionsTIshi === 1">请先选择网管</el-option>
            <el-option
            v-for="item in optionInfo"
            :key="item.value"
            :label="item.moduleName"
            :value="item.moduleCode">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="模块接口信息" prop="wGModuleInfo">
          <el-select v-model="ruleFormGwGrant.wGModuleInfo" placeholder="请选择网管信息" popper-class="zIndex-popper" @change="wGModuleInfoClick">
            <el-option value="" v-if="this.optionsTIshi === 1">请先选择网管信息</el-option>
            <el-option v-for="item in optionModuleInfo"
              :key="item.value"
              :label="item.interfaceCode"
              :value="item.interfaceCode">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="text-align: right">
          <el-button @click="FormGwGrantCz('ruleFormGwGrant')">重置</el-button>
          <el-button type="primary" @click="FormGwGrantSubmit('ruleFormGwGrant')">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script type='text/ecmascript-6'>
  import VSelect from '../../../../comm/vSelect.vue'
  import ajax from '../../../../../api/ajax/ajax'
  import api from '../../../../../api/url'
  export default {
    name: 'set-err-msg',
    props: {
      Data: {},
      messages: {},
      opts: {},
      moduleIdOpts: {}
    },
    components: {
      VSelect
    },
    watch: {
      Data () {
        this.getInitializeData()
      }
    },
    data () {
      return {
        optionsTIshi: 0,
        rules: {
          gwEnvIdData: '',
          wGVal: [
            { required: true, message: '请选择网管', trigger: 'blur' }
          ],
          wGInfo: [
            { required: true, message: '网管信息', trigger: 'blur' }
          ]
        },
        optionsWg: [],
        optionInfo: [],
        optionModuleInfo: [],
        ruleFormGwGrant: {
          wGVal: '', // 网管内容
          wGInfo: '', // 网管信息
          wGModuleInfo: '' // 模块接口信息
        },
        dialogGwGrantFlag: false,
        DataCache: {},
        currentFormData: {},
        interfacePostRules: {
            interfaceCode: [
                {required: true, trigger: 'blur', message: '接口编码不能为空'}
            ],
            interfaceName: [
                {required: true, trigger: 'blur', message: '接口名称不能为空'}
            ],
            // 所属模块
            moduleName: [
                {required: true, trigger: 'change', message: '请选择所属模块'}
            ],
            // 授权访问模式
            auditModel: [
                {required: true, trigger: 'change', message: '请选择授权访问模式'}
            ],
            // 接口描述信息
            interfaceDesc: [
                {required: true, trigger: 'blur', message: '接口描述信息不能为空'}
            ],
            // 交易类型
            transType: [
                {required: true, trigger: 'change', message: '请选择交易类型'}
            ],
            // openid转换标识
            opendIdTranslateFlag: [
                {required: true, trigger: 'change', message: '请选择openid转换标识'}
            ],
            // 流水转换标识
            orgJnlIdTranslateFlag: [
                {required: true, trigger: 'change', message: '请选择流水转换标识'}
            ]
        },
        moduleListDialogVisible: false,
        moduleListCurrentPage: 1,
        moduleData: {},
        tableLabels: {
          moduleName: '模块名称',
          moduleCode: '模块代码',
          createTime: '创建时间'
        },
        infonModuleFace: ''
      }
    },
    methods: {
      isAuthorizedClick () {
        this.addInterfaceSubmit()
      },
      closeDialogWg () {
      },
      wGModuleInfoClick (val) {
        this.infonModuleFace = val
      },
      FormGwGrantCz (formName) {
        this.$refs[formName].resetFields()
      },
      FormGwGrantSubmit (refVal) {
        this.$refs[refVal].validate((valid) => {
          if (valid) {
            this.addInterfaceSubmit(this.infonModuleFace)
            this.dialogGwGrantFlag = false
          } else {
            return false
          }
        })
      },
      AuthorizedChange () {
        ajax.post(api.QUERYGRANTENV, {}, true).then(res => {
          this.optionsWg = res
          this.optionsTIshi = 1
          })
          this.dialogGwGrantFlag = true
      },
      wGValeClick (val) {
        let params = {'gwEnvId': val}
        this.gwEnvIdData = val
        ajax.post(api.QUERYGRANTMODULE, params).then(res => {
          this.optionInfo = res
        })
      },
      wGInfoClick (val) {
        let params = {'gwEnvId': this.gwEnvIdData, moduleId: val}
        ajax.post(api.QUERYGRANTINTERFACE, params).then(res => {
          this.optionModuleInfo = res
        })
      },
      addInterfaceSubmit (faceVal) {
          this.$refs['interfacePostForm'].validate((valid) => {
              if (valid) {
                  if (!this.DataCache.fieldEncoding) {
                      this.DataCache.fieldEncoding = 'UTF-8'
                  }
                  this.DataCache.sourceType = '00'
                // var that = this
                // Object.keys(this.DataCache).forEach(function (key) {
                //   that.Data[key] = that.DataCache[key]
                // })
                  Object.keys(this.DataCache).forEach(key => {
                    this.Data[key] = this.DataCache[key]
                  })
                this.Data.serverInterfaceCode = faceVal
                this.Data.isAuthorizedID = this.Data.isAuthorizedID ? '1' : '0'
                ajax.post(api.MODIFYAPIINTERFACE, this.Data, true).then(res => {
                  if (res === 'success') {
                          this.$message({
                              message: '修改服务接口成功',
                              type: 'success'
                          })
                      }
                  }).catch(res => {
                      this.$message({
                          showClose: true,
                          message: res.errorMsg,
                          type: 'warning'
                      })
                  })
              } else {
                  return false
              }
          })
        this.$nextTick(() => {
          this.$refs['interfacePostForm'].clearValidate()
        })
      },
      // 重置表单
      resetFormData () {
        this.DataCache = {
          interfaceCode: this.Data.interfaceCode,
          interfaceName: this.Data.interfaceName,
          fieldEncoding: this.Data.fieldEncoding,
          moduleId: this.Data.moduleId,
          moduleName: this.Data.moduleName,
          auditModel: this.Data.auditModel,
          interfaceDesc: this.Data.interfaceDesc,
          transType: this.Data.transType,
          opendIdTranslateFlag: this.Data.opendIdTranslateFlag,
          orgJnlIdTranslateFlag: this.Data.orgJnlIdTranslateFlag
        }
        this.$nextTick(() => {
          this.$refs.interfacePostForm.clearValidate()
        })
      },
      // 初始化
      getInitializeData () {
        ajax.post(api.VIEWAPIMODULE, {moduleId: this.Data.moduleId, interfaceCode: this.Data.interfaceCode}, true).then(res => {
          for (let i in res) {
            this.Data[i] = res[i]
          }
          this.DataCache = {
            interfaceCode: this.Data.interfaceCode,
              interfaceName: this.Data.interfaceName,
              fieldEncoding: this.Data.fieldEncoding,
              moduleId: this.Data.moduleId,
              moduleName: this.Data.moduleName,
              auditModel: this.Data.auditModel,
              interfaceDesc: this.Data.interfaceDesc,
              transType: this.Data.transType,
              opendIdTranslateFlag: this.Data.opendIdTranslateFlag,
              orgJnlIdTranslateFlag: this.Data.orgJnlIdTranslateFlag,
              isAuthorized: this.Data.isAuthorized === '1'
          }
            this.$nextTick(() => {
                this.$refs.interfacePostForm.clearValidate()
            })
        }).catch(res => {
          this.$message({
            showClose: true,
            message: res.errorMsg,
            type: 'warning'
          })
        })
      },
      // 获取模块列表
      getModuleList (e = 1, s = 10) {
        ajax.post(api.LISTAPIMODULE, {pageNum: '1', pageSize: '20'}).then(res => {
            this.moduleData = res
        }).catch(res => {
          this.$message({
            showClose: true,
            message: res.errorMsg,
            type: 'warning'
          })
        })
      },
       // 选择模块列表
      openModuleList () {
        this.moduleListDialogVisible = true
      },
      selectModule (data) {
        this.DataCache.moduleId = data.moduleId
        this.DataCache.moduleName = data.moduleName
        this.moduleListDialogVisible = false
      },
      handleModuleListChange (p) {
        this.moduleListCurrentPage = p
        ajax.post(api.LISTAPIMODULE + '?pageSize=10&pageNum=' + p, {}).then(res => {
          this.moduleData = res
        }).catch(res => {
          this.$message({
            showClose: true,
            message: res.errorMsg,
            type: 'warning'
          })
        })
      },
      // 关闭选择模块列表弹窗
      closeDialog () {
        this.moduleListDialogVisible = false
      },
      // 处理模块列表分页
      handlePageChanges (params) {
        this.handleModuleListChange(params.currentPage)
      }
    },
    mounted () {
      this.getInitializeData()
      this.getModuleList()
    },
    activated () {
      this.DataCache = {
        interfaceCode: this.Data.interfaceCode,
        interfaceName: this.Data.interfaceName,
        fieldEncoding: this.Data.fieldEncoding,
        moduleId: this.Data.moduleId,
        moduleName: this.Data.moduleName,
        auditModel: this.Data.auditModel,
        interfaceDesc: this.Data.interfaceDesc,
        transType: this.Data.transType,
        opendIdTranslateFlag: this.Data.opendIdTranslateFlag,
        orgJnlIdTranslateFlag: this.Data.orgJnlIdTranslateFlag
      }
      this.$nextTick(() => {
        this.$refs['interfacePostForm'].clearValidate()
      })
      // this.currentFormData = JSON.parse(JSON.stringify(this.DataCache))
    },
    deactivated () {
      this.$refs['interfacePostForm'].resetFields()
      //   var that = this
      // Object.keys(this.Data).forEach(function (key) {
      //   that.DataCache[key] = that.Data[key]
      // })
      Object.keys(this.Data).forEach(key => {
        this.DataCache[key] = this.Data[key]
      })
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus">
  #modify-interface
    .bg-color-w
      background-color white
    .mar-t-10
      margin-top 10px
    .pd-w30
      padding 7px 30px
    .form-title
      padding 10px
    .el-select
      display block
      margin 0
    .dialogbtn
      text-align center
      margin 0
      padding-bottom 20px
      .el-form-item__content
        margin 0 !important
    .select
      display block
      width 100%
      padding 0 15px
      height 40px
      line-height 40px
      border 1px solid #dcdfe6
      border-radius 4px
      background #f5f5f5
      box-sizing border-box
</style>
